<template>
  <!-- 规划建设左侧 -->
  <div class="Index-box">
    <!-- 规划建设 -->
    <div class="planPlanbox">
      <!-- 公用title -->
      <div class="tiTletopBox">
        <div class="Title overallSituationTitle">规划建设</div>
        <div class="tiTletopBoxz">
          <div>下次更新时间</div>
          <div>2024-12-12</div>
        </div>
        <div class="tiTletopBoxdetails" @click="addGhjsXq">详情</div>
        <div class="tiTletopBoxTubiao"></div>
      </div>
      <div class="planPlanbox-middle">
        <div class="planPlanmiddle-itemAct">
          <div class="shuzi">49</div>
          <div class="guihuaxuexiao">现有学校</div>
        </div>
        <div class="planPlanmiddle-item">
          <div class="shuzi">49</div>
          <div class="guihuaxuexiao">在建学校</div>
        </div>
        <div class="planPlanmiddle-item">
          <div class="shuzi">49</div>
          <div class="guihuaxuexiao">带规划学校</div>
        </div>
      </div>
      <div class="planPlanbox-Echarts">
        <barChartEcharts :barChartList="barChartList" />
      </div>
    </div>
    <!-- 教育用地 -->
    <div class="educaTionallandbox">
      <div class="tiTletopBox">
        <div class="Title overallSituationTitle">教育用地</div>
        <div class="tiTletopBoxz">
          <div>下次更新时间</div>
          <div>2024-12-12</div>
        </div>
        <div class="tiTletopBoxdetails" @click="addJyydXq">详情</div>
        <div class="tiTletopBoxTubiao"></div>
      </div>
      <div class="educaTionallandbox-Echarts">
        <div class="BgImageBox"></div>
        <!-- 饼图 -->
        <pieChartEcahrts :pieChartObj="pieChartObj" />
      </div>
    </div>
    <!-- 师生情况 -->
    <div class="TeacherStudentSituation">
      <div class="tiTletopBox">
        <div class="Title overallSituationTitle">师生情况</div>
        <div class="tiTletopBoxz">
          <div>下次更新时间</div>
          <div>2024-12-12</div>
        </div>
        <div class="tiTletopBoxdetails" @click="addSsqkXq">详情</div>
        <div class="tiTletopBoxTubiao"></div>
      </div>
      <div class="TeacherStudentSituation-top">
        <div class="entSituation-itemAct">现有学校</div>
        <div class="entSituation-item">在建学校</div>
        <div class="entSituation-item">带规划学校</div>
      </div>
      <div class="TeacherStudentSituation-xian"></div>
      <div class="TeacherStudentSituation-wenzi">
        <div class="Situation-wenziItem">学生数量</div>
        <div class="Situation-wenziItem">教师数量</div>
        <div class="Situation-wenziItem">师生比</div>
      </div>
      <div class="TeacherStudentSituation-middle">
        <div class="StudentSituation-item">
          <div class="shujvC">
            <div class="shuzi">666668</div>
            <div class="danwei">人</div>
          </div>
        </div>
        <div class="StudentSituation-item">
          <div class="shujvC">
            <div class="shuzi">88</div>
            <div class="danwei">人</div>
          </div>
        </div>
        <div class="StudentSituation-item">
          <div class="shujvC">
            <div class="shuzi">1:12</div>
            <!-- <div class="danwei">人</div> -->
          </div>
        </div>
      </div>
      <div class="TeacherStudentSituation-bon">
        <barChartEcharts :barChartList="barChartList1" />
      </div>
    </div>
  </div>
</template>
<script setup>
import barChartEcharts from "@/components/barChartEcharts.vue"
import pieChartEcahrts from "@/components/pieChartEcahrtsgongyong.vue"
import { ue4 } from "@/utils/unrealJs"
import { ref } from "vue"
// 规划建设详情点击事件
const addGhjsXq = () => {
  ue4("GhplanDetails", { isClose: true })
}
// 教育用地详情点击事件
const addJyydXq = () => {
  ue4("GhEducationalDetails", { isClose: true })
}
// 师生情况详情点击事件
const addSsqkXq = () => {
  ue4("GhTeacherSituationDetails", { isClose: true })
}
const barChartList = ref({
  grid: {
    top: "20%",
    left: "5%",
    right: "5%",
    bottom: "5%",
    containLabel: true
  },
  xData: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"],
  seriesObj: {
    教师详情: [10, 20, 30, 40, 50, 60]
  },
  // 从浅到深(先量上面再量下面)
  colorList: {
    教师详情: ["rgba(66, 165, 245)", "rgba(68, 217, 253)"]
  },
  isShowlegend: false
})
const barChartList1 = ref({
  grid: {
    top: "20%",
    left: "5%",
    right: "5%",
    bottom: "0%",
    containLabel: true
  },
  xData: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"],
  seriesObj: {
    教师详情: [10, 20, 30, 40, 50, 60],
    学生详情: [20, 30, 40, 50, 60, 70]
  },
  // 从浅到深(先量上面再量下面)
  colorList: {
    教师详情: ["rgba(66, 165, 245)", "rgba(68, 217, 253)"],
    学生详情: ["#41D348", "#41D348"]
  },
  isShowlegend: true
})
const pieChartObj = ref({
  radius: ["28%", "42%"],
  center: ["25.4%", "50.4%"],
  danwei: "千米/小时",
  pieChartList: [
    {
      value: 10,
      name: "现有学校",
      age: 18
    },
    { value: 80, name: "在建学校", age: 18 },
    { value: 60, name: "带规划学校", age: 18 }
  ]
})
</script>
<style scoped lang="less">
.planPlanbox {
  width: 400px;
  height: 285px;
  background: url("@/assets/Left/Plan/XXC_GHJS.svg") no-repeat center;
  background-size: 100% 100%;
  position: relative;
  .planPlanbox-Echarts {
    width: 400px;
    height: 175px;
    // background-color: rgba(20, 50, 60, 0.2);
  }
}
.educaTionallandbox {
  margin-top: 12px;
  width: 400px;
  height: 254px;
  background: url("@/assets/Left/Plan/XXC_JYYD.svg") no-repeat center;
  background-size: 100% 100%;
  .educaTionallandbox-Echarts {
    width: 400px;
    height: 210px;
    position: relative;
    .BgImageBox {
      position: absolute;
      left: 2%;
      top: 15%;
      width: 187px;
      height: 148px;
      background-color: red;
      background: url("@/assets/Left/Plan/JYYD_BJ_HXT.png") no-repeat center;
      background-size: 100% 100%;
    }
    // background-color: rgba(20, 50, 60, 0.2);
  }
}
.TeacherStudentSituation {
  margin-top: 12px;
  width: 400px;
  height: 408px;
  background: url("@/assets/Left/Plan/XXC_SSQK.svg") no-repeat center;
  background-size: 100% 100%;
  position: relative;
  .TeacherStudentSituation-top {
    width: 400px;
    height: 40px;
    display: flex;
    align-items: center;
    .entSituation-item {
      width: 133px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 14px;
    }
    .entSituation-itemAct {
      width: 133px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      background: url("@/assets/Left/Plan/SSQK_TAB_XZ.svg") no-repeat center;
      background-size: 100% 100%;
    }
  }
  .TeacherStudentSituation-xian {
    position: absolute;
    top: 82px;
    width: 100%;
    height: 2px;
    background-color: #6ccef5;
  }
  .TeacherStudentSituation-wenzi {
    top: 90px;
    position: absolute;
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-around;
    .Situation-wenziItem {
      font-size: 12px;
      width: 120px;
      height: 48px;
      text-align: center;
      color: #caf0ff;
    }
  }
  .TeacherStudentSituation-middle {
    width: 400px;
    height: 48px;
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
    .StudentSituation-item {
      width: 120px;
      height: 48px;
      background-color: pink;
      background: url("@/assets/Left/Plan/SSQK_BJ1.svg") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 10px;
      .shujvC {
        margin: auto;
        display: flex;
        align-items: center;
        padding-top: 8px;
        .shuzi {
          font-size: 18px;
        }
        .danwei {
          margin-top: 4px;
        }
      }
    }
  }
  .TeacherStudentSituation-bon {
    margin-top: 10px;
    width: 100%;
    height: 240px;
  }
}
</style>
